<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jstl/core">

<ui:composition>

<head>
<title>SoundScape ${SoundscapeManager.version.fullVersion}</title>
<link href="css/ss.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="ss3gwt/ss3gwt.nocache.js"></script>
</head>

<body class="soundscape">
	<div id="theTitleBar">
    	<div style="float: left">
            <strong>SoundScape ${SoundscapeManager.version.fullVersion}</strong> :: 
            <strong><span class="sexy">Albums [</span>${SoundscapeManager.albumCount}<span class="sexy">]</span></strong> :: 
            <strong><span class="sexy">Artists [</span>${SoundscapeManager.artistCount}<span class="sexy">]</span></strong>
        </div>
        <div class="selector" id="yearSelector">
        	<span class="sexy">[</span><span id="selectedYearContainer"><a id="selectedYear">${SoundscapeManager.latestYear}</a></span><span class="sexy">] Year</span>
        </div>
        <div class="selector">
        	<span class="sexy">[</span><span id="selectedArtistContainer"><a id="selectedArtist">----</a></span><span class="sexy">] Artist</span>
        </div>
        <div style="clear: both"></div>
	</div>
    
    <div id="theSubTitleBar">
    	<div id="theMissionStatement">for your unrelenting aural pleasure</div>
    	<div id="theRandomizer"><a id="randomLink">the randomizer</a></div>
    	<div style="clear: both"></div>
    </div>
    
	<div id="theContents">
        <c:forEach items="${SoundscapeManager.currentView}" var="album" varStatus="loopy">
            <table class="albuminfo">
                <tr>          
                    <td class="thumbnail" id="${album.id}"><img src="images/album-spinner.gif" width="35" /></td>
                </tr>
                <tr>
                    <td class="details">
                    	<span id="link_${album.id}" class="artistName"><a class="artistLink">#{album.artist}</a></span><br />
	                    <span class="sexy">&quot;<span class="albumName">${album.album}</span>&quot;</span><br />
						<span class="year" id="year_${album.id}"><a class="whiteLink">${album.year}</a></span>
                    </td>
                </tr>
            </table>
		</c:forEach>
	</div>
</body>

</ui:composition>
</html>